<template>
  <div class="loginbackground">
    <div class="loginframe">
      <!-- 注册 -->
      <div class="logon"></div>
      <!-- 登入 -->
      <div class="login">
        <h1>登录</h1>
        <div class="loginfrom">
          <!-- 用户登入表单 -->
          <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="userlogininf"
            style="max-width: 460px"
            :rules="loginrules"
            ref="ruleFormRef"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userlogininf.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="userlogininf.password" />
            </el-form-item>
            <el-form-item class="loginbuttom">
              <el-button type="primary" @click="login(ruleFormRef)">
                登录
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const userlogininf = ref({
  username: "",
  passwor: "",
});
const ruleFormRef = ref();
// 登入表单的验证
const loginrules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 3,
      max: 10,
      message: "请输入3个字符到10个之间的用户名",
      trigger: "blur",
    },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
//  登入的方法
const login = (formEl) => {

  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      axios
        .post("/api/adminuser/loginadminuser", userlogininf.value)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            ElMessage({
              message: "登入成功",
              type: "success",
            });
            window.localStorage.setItem("token",res.data.token)
            router.push("/home");
          } else {
            ElMessage.error(res.data.msg);
          }
        });
    } else {
      console.log("error submit!");
    }
  });
};
// 重置的方法
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
.loginbackground {
  width: 100vw;
  height: 100vh;
  background: url("@/img/login.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.loginframe {
  width: 1000px;
  height: 600px;
  display: flex;
  position: absolute;
  top: 50%;
  margin-top: -300px;
  left: 50%;
  margin-left: -500px;
  /* background: url("@/img/login.jpg") no-repeat; */
  border-radius: 5%;
  overflow: hidden;
}
.logon {
  width: 50%;
  height: 100%;
  background: white;
  background-size: 100% 100%;
  border-top-left-radius: 5%;
  border-bottom-left-radius: 5%;
  background: skyblue;
}
.login {
  width: 50%;
  height: 100%;
  background: white;
  border-top-right-radius: 5%;
  border-bottom-right-radius: 5%;

  text-align: center;
}
.login h1 {
  margin-top: 50px;
}
.loginfrom {
  margin-top: 100px;
}
.loginbuttom {
  margin-top: 50px;
  margin-left: 100px;
}
</style>